<template>
    <h2 style="text-align: center;">网格队伍</h2>
    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">网格化管理</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>网格队伍</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 左右布局 -->
    <div class="common-layout">
        <el-container>
            <!-- 树形数据 -->
            <el-aside width="200px" style="border:  1px solid #ccc; margin: 20px 3px; padding: 15px;">
                <el-input
                    v-model="filterText"
                    class="w-60 mb-2"
                    placeholder="Filter keyword"
                />

                <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    class="filter-tree"
                    :data="AreaTreeInfo"
                    :props="defaultProps"
                    default-expand-all
                    :filter-node-method="filterNode"
                />
            </el-aside>
            <!-- 表单查询数据显示部分 -->
            <el-main>
                <!-- 表单查询部分 -->
                <div style="border: 1px solid #ccc; margin: 1px 3px; padding: 15px;">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="网格名称">
                            <el-input v-model="formInline.GridTeam_Name" placeholder="请选择网格名称" clearable />
                        </el-form-item>
                        
                        <el-form-item label="所属区域">
                            <el-cascader v-model="formInline.Area_Id" :options="AreaTreeInfo1" :props="props1" @change="AreaChanger" clearable />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="GetGridTeam">查询</el-button>
                            <el-button type="primary" @click="Reset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 数据显示部分 -->
                <div style="border: 1px solid #ccc; margin: 10px 3px; padding: 15px;">
                    <el-button  type="success" @click="AddGridTeam" >新增+</el-button>
                    <el-table :data="Info" style="width: 100%">
                        <el-table-column fixed type="index" label="序号" width="90" />
                        <el-table-column prop="Id" label="编号" width="150" />
                        <el-table-column prop="GridTeam_Name" label="网格名称" width="180" />
                        <el-table-column prop="GridTeam_Code" label="网格编码" width="180" />
                        <el-table-column prop="GridTeam_Manger" label="网格长" width="180" />
                        <el-table-column prop="GridTeam_Tors" label="网格员" width="180" />
                        <el-table-column fixed="right" label="操作" min-width="180">
                        <template #default>
                            <el-button link type="primary" size="small" @click="handleClick">
                            Detail
                            </el-button>
                            <el-button link type="primary" size="small">Edit</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>


                <!-- 添加弹出窗 -->
                <el-dialog
                    v-model="AdddialogVisible"
                    title="添加网格队伍"
                    width="500"
                >

                <el-form
                    ref="ruleFormRef"
                    style="max-width: 600px"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="auto"
                    class="demo-ruleForm"
                    :size="formSize"
                    status-icon
                >
                    <el-form-item label="Activity name" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="Activity zone" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="Activity zone">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                    </el-form-item>
                    <el-form-item label="Activity count" prop="count">
                    <el-select-v2
                        v-model="ruleForm.count"
                        placeholder="Activity count"
                        :options="options"
                    />
                    </el-form-item>
                    <el-form-item label="Activity time" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                        <el-date-picker
                            v-model="ruleForm.date1"
                            type="date"
                            aria-label="Pick a date"
                            placeholder="Pick a date"
                            style="width: 100%"
                        />
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center" :span="2">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                        <el-time-picker
                            v-model="ruleForm.date2"
                            aria-label="Pick a time"
                            placeholder="Pick a time"
                            style="width: 100%"
                        />
                        </el-form-item>
                    </el-col>
                    </el-form-item>
                    <el-form-item label="Instant delivery" prop="delivery">
                    <el-switch v-model="ruleForm.delivery" />
                    </el-form-item>
                    <el-form-item label="Activity location" prop="location">
                    <el-segmented v-model="ruleForm.location" :options="locationOptions" />
                    </el-form-item>
                    <el-form-item label="Activity type" prop="type">
                    <el-checkbox-group v-model="ruleForm.type">
                        <el-checkbox value="Online activities" name="type">
                        Online activities
                        </el-checkbox>
                        <el-checkbox value="Promotion activities" name="type">
                        Promotion activities
                        </el-checkbox>
                        <el-checkbox value="Offline activities" name="type">
                        Offline activities
                        </el-checkbox>
                        <el-checkbox value="Simple brand exposure" name="type">
                        Simple brand exposure
                        </el-checkbox>
                    </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="Resources" prop="resource">
                    <el-radio-group v-model="ruleForm.resource">
                        <el-radio value="Sponsorship">Sponsorship</el-radio>
                        <el-radio value="Venue">Venue</el-radio>
                    </el-radio-group>
                    </el-form-item>
                    <el-form-item label="Activity form" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" />
                    </el-form-item>
                    <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        Create
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                    </el-form-item>
                </el-form>
                </el-dialog>




            </el-main>
        </el-container>
    </div>


</template>


<script lang="ts" setup>
    import { ref, watch,reactive,onMounted } from 'vue'
    import { ElMessage, type TreeInstance } from 'element-plus'
    import axios from 'axios';
    import http from '@/http/AxiosHelper';
    import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


    //显示响应式数据
    const Info=ref([]);
    //分页响应式数据9
    const PageInfo=ref({
        index:1,
        size:3,
        zongtiao:0,
        zongpage:0,
    })
    //钩子函数
    onMounted(()=>{
        GetGridTeam();//显示
        GetAreaTree();//加载区域数据

    })

    //查询条件
    const formInline = reactive({
        GridTeam_Name: '',
        Area_Id:-1,
    })

    //显示
    const GetGridTeam = () => {
        http.get("T7/GridTeam/GetGridTeam",
            {
                params:{
                    GridTeam_Name:formInline.GridTeam_Name,
                    Area_Id:formInline.Area_Id,
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plsit;
            PageInfo.value.zongpage=res.data.ZongPage;
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }

    //逻辑删除
    const handleClick = () => {

    }
    //重置
    const Reset=()=>{
        formInline.Area_Id=-1;
        formInline.GridTeam_Name="";
    }
    //-----------------------------------------------------------树形级联------------------------------------------------------//

    interface Tree {
        [key: string]: any
    }

    const filterText = ref('')
    const treeRef = ref<TreeInstance>()

    const defaultProps = {
        children: 'Children',
        label: 'Area_Name',
        id:"Id",
    }

    watch(filterText, (val) => {
        treeRef.value!.filter(val)
    })

    const filterNode = (value: string, data: Tree) => {
        if (!value) return true
        return data.Area_Name.includes(value)
    }

    //区域树形响应式数据
    const AreaTreeInfo =ref([])
    const AreaTreeInfo1=ref([])
    //加载区域数据
    const GetAreaTree=()=>{
        http.get("T7/Area/GetAreaTree")
        .then(res=>{
            AreaTreeInfo.value=res.data.Data;
            AreaTreeInfo1.value=res.data.Data;
        })
    }
    //级联
    const props1 = {
        checkStrictly: true,
        value:"Id",
        label:"Area_Name",
        children: 'Children',
    }

    //获取最后一个
    const AreaChanger=(value:any)=>{
        formInline.Area_Id=value[value.length-1];
    }
    //-----------------------------------------------------------添加弹出窗------------------------------------------------------//
    
    const AdddialogVisible=ref(false)

    //添加点击按钮
    const AddGridTeam=()=>{
        AdddialogVisible.value=true;
    }


    const formSize = ref<ComponentSize>('default')
    const ruleFormRef = ref<FormInstance>()
    //添加响应式数据
    const ruleForm = reactive({
        name: 'Hello',
        region: '',
        count: '',
        date1: '',
        date2: '',
        delivery: false,
        location: '',
        type: [],
        resource: '',
        desc: '',
    })

    const locationOptions = ['Home', 'Company', 'School']

    const rules = reactive<FormRules>({
        name: [
            { required: true, message: 'Please input Activity name', trigger: 'blur' },
        ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
            console.log('submit!')
            } else {
            console.log('error submit!', fields)
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    const options = Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
    }))
    
    //-----------------------------------------------------------修改弹出窗------------------------------------------------------//
    
</script>


<style>
    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }
    </style>


